<!-- eslint-disable no-console -->
<script setup lang="ts">
import { useVbenModal } from '@vben/common-ui';

import { InputSearch, message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import chargeModal from '#/utils/view/user/chargeModal.vue';

import Holiday from '../../holiday/index.vue';

const [Teammember, editmodalApi] = useVbenModal({
  // 连接抽离的组件
  connectedComponent: chargeModal,
  destroyOnClose: true,
  async onClosed() {
    const member = editmodalApi.getData();
    console.log(member);
    // const teammember: TeamApi.TeammemberParams = {
    //   nickName: '',
    //   teamId: 0,
    //   tel: '',
    //   userId: 0,
    //   userName: '',
    // };
  },
});

const [QueryForm] = useVbenForm({
  showDefaultActions: false,
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  // 提交函数
  handleSubmit: onSubmit,

  layout: 'horizontal',
  schema: [
    {
      component: '',
      componentProps: {
        placeholder: '请选择人员',
      },
      fieldName: 'indexName',
      label: '人员',
    },
    {
      component: 'DatePicker',
      fieldName: 'datePicker',
      label: '日期',
    },
  ],
  wrapperClass: 'grid-cols-1 md:grid-cols-2',
});
function onSubmit(values: Record<string, any>) {
  message.success({
    content: `form values: ${JSON.stringify(values)}`,
  });
}
</script>
<template>
  <div>
    <Teammember />
    <QueryForm>
      <template #indexName>
        <InputSearch placeholder="请选择检测项" @search="editmodalApi.open()" />
      </template>
    </QueryForm>
    <Holiday />
  </div>
</template>
<style scoped>
:deep(.ant-radio-button-wrapper:first-child) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

:deep(.ant-radio-button-wrapper:last-child) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
</style>
